<template>
	<h2>查询用户</h2>
	<el-select v-model="value" class="m-2" placeholder="请选择查询方式">
	    <el-option
	      v-for="item in options"
	      :key="item.value"
	      :label="item.label"
	      :value="item.value"
		  @click='search_method(item.value)'
	    />
	  </el-select>
	<input v-model="keywords" class="search" type="text" placeholder="请输入查询的关键字">
	<button class="search_btn" @click="look">查询</button>

	<table border="1" cellspacing='0'>
		<tr>
			<th>用户id</th>
			<th>昵称</th>
			<th>手机号</th>
			<th>性别</th>
			<th>类型</th>
			<th>操作</th>
		</tr>
		<tr v-for='(el,index) in dataShow' :class="{ 'alt': index%2==1 }">
			<td>{{el.uid}}</td>
			<td>{{el.nickname}}</td>
			<td>{{el.tel}}</td>
			<td>{{el.gender}}</td>
			<td>{{el.type}}</td>
			<td>
				<el-button @click='deleteuser(el.uid)' type="danger" size="small">删除</el-button>
				<!-- <el-button @click='updateuser(el.uid)' type="primary" size="small">修改</el-button> -->
			</td>
		</tr>
	</table>
	<div class="page">
		<ul>
			<li>
				<a href="#"  v-on:click="prePage"><button>&lt;</button></a>
			</li>
			<li v-for="(item, index) in totalPage">
				<a href="#" v-on:click="toPage(index)" :class="{active: currentPage==index}">
					<button :style='[sty]' @click="change">{{ index+1 }}</button>
				</a>
			</li>
			<li>
				<a href="#" v-on:click="nextPage"><button>&gt;</button></a>
			</li>
		</ul>
	</div>
</template>

<script>
	import {getCurrentInstance,ref,reactive,onMounted} from 'vue'
	// let {proxy}=getCurrentInstance()
	export default {
		setup(){
			let {proxy}=getCurrentInstance()
			let keywords = ref('')
			// 查找方式
			let select_type = ref('')
			let info = reactive([])
			let search_method = (arg)=>{
				if(arg.includes('id')){
					select_type.value = 'id'
				}else if(arg.includes('用户名')){
					select_type.value = 'username'
				}else if(arg.includes('性别')){
					select_type.value = 'sex'
				}else if(arg.includes('用户类型')){
					select_type.value = 'type'
				}
			}
						
			// 点击查询，根据选择方式进行
			// 点击查询
			
			let look=async()=> {
				// 获取搜索关键词
				if(!keywords.value){
					alert('请输入查询内容')
					return
				}else {
					if(select_type.value == ''){
						alert('选择查找方式')
					}else if(select_type.value == 'id'){
						// let uid = keywords.value
						console.log('uid---',keywords.value)
						let res= await proxy.$axios.get("/egg/select_id",{
							params:{
								uid:keywords.value,
							}
						})
						console.log(res)
						info.splice(0,info.length,...res.data.data)
					}else if(select_type.value == 'username'){
						let res= await proxy.$axios.get("/egg/select_nickname",{
							params:{
								nickname:keywords.value,
							}
						})
						console.log(res)
						info.splice(0,info.length,...res.data.data)
					}else if(select_type.value == 'sex'){
						let res= await proxy.$axios.get("/egg/select_sex",{
							params:{
								sex:keywords.value,
							}
						})
						console.log(info)
						info.splice(0,info.length,...res.data.data)
					}else if(select_type.value == 'type'){
						let type = 0
						if(keywords.value=='管理员' || keywords.value==2){
							type = 2
						}else if(keywords.value=='普通用户' || keywords.value==1){
							type = 1
						}
						
						let res= await proxy.$axios.get("/egg/select_type",{
							params:{
								type,
							}
						})
						console.log(res)
						info.splice(0,info.length,...res.data.data)
					}
					console.log(info,'看有没有',typeof info)
				}
			}
			
			// 点击删除，删除用户
			let deleteuser = async(uid)=>{
				let res= await proxy.$axios.get("/egg/deleteuser",{
					params:{
						uid
					}
				})
				console.log(res.data)
			}
			// onMounted(async()=>{
			// 	// let {proxy}=getCurrentInstance()
			// 	let res=await proxy.$axios.get("/egg/select")
			// 	console.log(res)
			// 	info.splice(0,info.length,...res.data.data)
			// 	// info = res.data.data
			// 	console.log(info,'看info的类型',typeof info)
			// })
			
			return {
				search_method,look,keywords,info,deleteuser,onMounted
			}
		},
		data(){
			return {
				// keywords:'',
				sty:{
					// backgroundColor:'#30bdb1'
					backgroundColor:''
				},
				// proxy,
				// // 查找方式
				// select_type:'',
				// keywords:'',
				
				// info:[],
				options: [
				  {
				    value: '根据id查找',
				    label: '根据id查找',
				  },
				  {
				    value: '根据用户名查找',
				    label: '根据用户名查找',
				  },
				  {
				    value: '根据性别查找',
				    label: '根据性别查找',
				  },
				  {
				    value: '根据用户类型查找',
				    label: '根据用户类型查找',
				  },
				],
				value:'',
				// 总页数
				pageNum: 1,
				// 每页显示个数
				pageSize: 3,
				// 当前页
				currentPage: 0,
				// 总数据
				totalPage: [],
				// 当前显示的数据
				dataShow: []
			}
		},
		methods: {
			nextPage() {
				var vm = this;
				if (vm.currentPage == vm.pageNum - 1) return;
				vm.dataShow = vm.totalPage[++vm.currentPage]
			},
			prePage() {
				var vm = this;
				if (vm.currentPage == 0) return;
				vm.dataShow = vm.totalPage[--vm.currentPage]
			},
			toPage(page) {
				var vm = this;
				vm.currentPage = page
				vm.dataShow = vm.totalPage[vm.currentPage];
			},
			change(e){
				// console.log('===',e.target)
				if(this.sty.backgroundColor = 'none'){
					this.sty.backgroundColor = ''
				}else{
					this.sty.backgroundColor = 'none'
				}
				console.log(this.sty)
				e.target.style.backgroundColor = '#30bdb1'
				// this.sty.backgroundColor = '#30bdb1'
			},
			// search_method(arg){
			// 	if(arg.includes('id')){
			// 		this.select_type = 'id'
			// 	}else if(arg.includes('用户名')){
			// 		this.select_type = 'username'
			// 	}else if(arg.includes('性别')){
			// 		this.select_type = 'sex'
			// 	}else if(arg.includes('用户类型')){
			// 		this.select_type = 'type'
			// 	}
			// },
			// async look(){
			// 	// 获取搜索关键词
			// 	if(!this.keywords){
			// 		alert('请输入查询内容')
			// 		return
			// 	}else {
			// 		if(this.select_type == ''){
			// 			alert('选择查找方式')
			// 		}else if(this.select_type == 'id'){
			// 			// let uid = keywords.value
			// 			let res= await proxy.$axios.get("/egg/select_id",{
			// 				params:{
			// 					uid:this.keywords,
			// 				}
			// 			})
			// 			console.log(res)
			// 			this.info = res.data.data
			// 			// info.splice(0,info.length,...res.data.data)
			// 		}else if(this.select_type == 'username'){
			// 			let res= await proxy.$axios.get("/egg/select_nickname",{
			// 				params:{
			// 					nickname:this.keywords,
			// 				}
			// 			})
			// 			console.log(res)
			// 			this.info = res.data.data
			// 			// info.splice(0,info.length,...res.data.data)
			// 		}else if(this.select_type == 'sex'){
			// 			let res= await proxy.$axios.get("/egg/select_sex",{
			// 				params:{
			// 					sex:this.keywords,
			// 				}
			// 			})
			// 			console.log(info)
			// 			this.info = res.data.data
			// 			// info.splice(0,info.length,...res.data.data)
			// 		}else if(this.select_type == 'type'){
			// 			let type = 0
			// 			if(this.keywords=='管理员' || this.keywords==2){
			// 				type = 2
			// 			}else if(this.keywords=='普通用户' || this.keywords==1){
			// 				type = 1
			// 			}
						
			// 			let res= await proxy.$axios.get("/egg/select_type",{
			// 				params:{
			// 					type,
			// 				}
			// 			})
			// 			console.log(res)
			// 			this.info = res.data.data
			// 			// info.splice(0,info.length,...res.data.data)
			// 		}
			// 		console.log(info,'看有没有',typeof info)
			// 	}
			// }
		},
		created:async function() {
			// 在渲染请求得到所有用户的信息
			let {proxy}=getCurrentInstance()
			let res=await proxy.$axios.get("/egg/select")
			console.log(res)
			this.info = res.data.data
			console.log(this.info,'看info的类型',typeof this.info)
			
			var vm = this;
			// 总页数
			vm.pageNum = Math.ceil(vm.info.length / vm.pageSize) || 1;
			// console.log(vm.info.length,vm.pageNum,'===')
			// 分组
			for (var i = 0; i < vm.pageNum; i++) {
				vm.totalPage[i] = vm.info.slice(vm.pageSize * i, vm.pageSize * (i + 1))
			}
			// 取值
			vm.dataShow = vm.totalPage[vm.currentPage];
			
		},
		mounted:async function(){
			
			console.log(this.info,'rerer-----')
		}
	}
</script>

<style scoped>
	h2 {
		margin-left: 20px;
	}
	select {
		width: 150px;
		height: 30px;
		margin-left: 130px;
	}
	.search {
		width: 300px;
		height: 25px;
		color: #999;
		border-radius: 20px 0 0 20px;
		border: 1px solid #A8ABB2;
		border-right: none;
		padding: 5px 10px;
		outline: none;
	}

	.search_btn {
		width: 100px;
		height: 38px;
		color: aliceblue;
		background-color: royalblue;
		border: 1px solid royalblue;
		border-left: none;
		border-radius: 0 20px 20px 0;
		outline: none;
	}

	table {
		/* border: 1px solid #996f3b; */
		color: #999999;
		margin-top: 20px;
	}
	th {
		background-color: #30bdb1;
		font-size: 18px;
		outline: none;
		/* border: 1px solid #30bdb1; */
	}
	table td {
		width: 120px;
		height: 30px;
		text-align: center;
		outline: none;
		border: 1px solid #b0095f;
	}
	ul {
		display: flex;
	}
	li {
		list-style: none;
	}
	.page {
		/* margin: 0 auto; */
		margin-left: 600px;
	}
	.page button {
		width: 30px;
		height: 30px;
		/* background-color: #30bdb1; */
		outline: none;
	}
</style>
